{% extends "base.html" %}

{% block extra_styles %}
<link href="{{ url_for('static', filename='css/components/cards.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='css/components/modal.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='css/components/table.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='css/components/forms.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='css/components/buttons.css') }}" rel="stylesheet">
<!-- 引入 ECharts -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
<style>
    /* 全局样式 */
    .container-fluid {
        width: 100%;
        max-width: 1520px;
        margin: 0 auto;
        padding: 0 15px;
        position: relative;
    }

    /* 主内容区域 */
    .main-content {
        width: calc(100% - 350px);
        margin-right: 320px;
        padding: 15px;
        z-index: 1;
    }

    /* 右侧面板 */
    .stats-panel {
        position: fixed;
        top: 70px;
        width: 320px;
        max-height: calc(100vh - 80px);
        overflow-y: auto;
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        padding: 15px;
        z-index: 10;
    }

    /* 通用数据可视化样式 */
    .data-visualization-container {
        margin: 20px 0;
        padding: 15px;
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    .data-visualization-title {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 15px;
        color: #333;
        display: flex;
        align-items: center;
    }

    .data-visualization-title i {
        margin-right: 8px;
        color: #4361ee;
    }

    .ratio-bar {
        height: 25px;
        width: 100%;
        background-color: #f0f0f0;
        border-radius: 5px;
        overflow: hidden;
        display: flex;
        margin-bottom: 10px;
    }

    .ratio-segment {
        height: 100%;
        transition: width 0.5s ease;
    }

    .data-comparison-label {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        font-size: 14px;
    }

    .data-comparison-legend {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 10px;
    }

    .data-legend-item {
        display: flex;
        align-items: center;
        margin-right: 10px;
        font-size: 13px;
    }

    .data-legend-color {
        width: 12px;
        height: 12px;
        border-radius: 2px;
        margin-right: 5px;
    }

    /* 加载状态样式 */
    .loading-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 20px;
    }

    .loading-spinner {
        width: 40px;
        height: 40px;
        border: 3px solid #f3f3f3;
        border-top: 3px solid #3498db;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin-bottom: 10px;
    }

    .loading-text {
        font-size: 14px;
        color: #666;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    /* 响应式设计 */
    @media (max-width: 1550px) {
        .container-fluid {
            max-width: 100%;
        }
        
        .stats-panel {
            right: 10px;
        }
    }

    @media (max-width: 1200px) {
        .main-content {
            width: calc(100% - 300px);
            margin-right: 280px;
        }
        
        .stats-panel {
            width: 280px;
        }
    }

    @media (max-width: 768px) {
        .main-content {
            width: 100%;
            margin-right: 0;
        }
        
        .stats-panel {
            position: static;
            width: 100%;
            max-height: none;
            margin-top: 20px;
        }
        
        .data-comparison-label {
            flex-direction: column;
            gap: 5px;
        }
    }

    /* 优化加载动画样式 */
    .loading-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 3rem;
        min-height: 200px;
    }

    .loading-spinner {
        width: 50px;
        height: 50px;
        position: relative;
        margin-bottom: 1.5rem;
    }

    .loading-spinner:before,
    .loading-spinner:after {
        content: '';
        position: absolute;
        border-radius: 50%;
        animation: pulse 1.8s ease-in-out infinite;
    }

    .loading-spinner:before {
        width: 100%;
        height: 100%;
        background-color: rgba(24, 144, 255, 0.2);
        animation-delay: -0.9s;
    }

    .loading-spinner:after {
        width: 75%;
        height: 75%;
        background-color: rgba(24, 144, 255, 0.4);
        top: 12.5%;
        left: 12.5%;
    }

    .loading-text {
        color: var(--text-secondary);
        font-size: 0.95rem;
        font-weight: 500;
        letter-spacing: 0.5px;
        margin-top: 0.5rem;
        position: relative;
        padding-right: 1.5rem;
    }

    @keyframes pulse {
        0% {
            transform: scale(0.6);
            opacity: 0.8;
        }
        50% {
            transform: scale(1);
            opacity: 0.5;
        }
        100% {
            transform: scale(0.6);
            opacity: 0.8;
        }
    }

    /* 优化页面布局 */
    .container-fluid {
        width: 100%;
        max-width: 1520px; /* 增加最大宽度，给右侧面板留更多空间 */
        margin: 0 auto;
        padding: 0 20px;
        position: relative;
    }

    /* 主内容区域布局优化 */
    .main-content {
        width: calc(100% - 340px); /* 留出右侧面板宽度加边距 */
        padding: 20px 0;
        position: relative;
        z-index: 1;
        float: left; /* 确保主内容在左侧 */
    }

    /* 右侧面板定位优化 - 数据概览部分 */
    .stats-panel {
        position: fixed;
        top: 80px;
        width: 320px; /* 保持宽度 */
        right: 0; /* 直接固定在窗口最右侧 */
        background: white;
        border-radius: 12px 0 0 12px; /* 只圆角左侧 */
        box-shadow: -4px 4px 20px rgba(0, 0, 0, 0.1);
        z-index: 10; /* 确保在顶层 */
        max-height: calc(100vh - 100px);
        overflow-y: auto;
        padding: 20px;
        transition: right 0.3s ease, box-shadow 0.3s ease; /* 平滑过渡效果 */
        border-left: 1px solid var(--gray-200);
    }

    /* 卡片容器优化 */
    .card, .comparison-card, .performance-card {
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        background: white;
        padding: 20px;
        margin-bottom: 20px;
        overflow: hidden;
    }

    /* 性能监控卡片优化 */
    .performance-card {
        margin-bottom: 0;
    }

    .performance-metrics {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .metric-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #f9fafb;
        border-radius: 8px;
        padding: 12px 15px;
    }

    .metric-info {
        display: flex;
        flex-direction: column;
    }

    .metric-chart {
        width: 120px;
        height: 40px;
    }

    /* 图表和数据卡片大小统一 */
    .chart-container, .data-card {
        border-radius: 12px;
        margin-bottom: 20px;
    }

    /* 响应式布局优化 */
    @media (max-width: 1550px) {
        .stats-panel {
            right: 0; /* 始终保持在右侧 */
        }
    }

    @media (max-width: 1200px) {
        .main-content {
            width: 100%; /* 较小屏幕占满宽度 */
            float: none;
        }
        
        .stats-panel {
            position: static; /* 改为正常文档流 */
            width: 100%;
            margin-top: 20px;
            border-radius: 12px; /* 恢复所有边的圆角 */
            border-left: none;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }
    }

    @media (max-width: 768px) {
        .container-fluid {
            padding: 0 15px;
        }
        
        .metric-item {
            flex-direction: column;
            align-items: flex-start;
            gap: 10px;
        }
        
        .metric-chart {
            width: 100%;
        }
    }

    /* 右侧统计面板样式 */
    .stats-panel h5 {
        color: var(--text-color);
        font-weight: 600;
        margin-bottom: 15px; /* 增加标题下方间距 */
        font-size: 1.1rem; /* 增大标题字体 */
        display: flex;
        align-items: center;
        border-bottom: 1px solid #eaeaea;
        padding-bottom: 10px;
    }

    .stats-panel h5 i {
        color: var(--primary-color);
        opacity: 0.8;
        font-size: 1rem;
        margin-right: 8px;
    }

    /* 为右侧面板添加滚动条的样式 */
    .stats-panel::-webkit-scrollbar {
        width: 6px;
    }

    .stats-panel::-webkit-scrollbar-track {
        background: rgba(0,0,0,0.03);
        border-radius: 3px;
    }

    .stats-panel::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,0.1);
        border-radius: 3px;
    }

    .stats-panel::-webkit-scrollbar-thumb:hover {
        background: rgba(0,0,0,0.2);
    }

    /* 切换按钮样式完善 */
    .toggle-stats-panel {
        position: fixed;
        top: 120px; /* 位置略微下移 */
        right: 320px;
        background: white;
        border: 1px solid var(--gray-200);
        border-right: none;
        border-radius: 4px 0 0 4px;
        padding: 8px 10px;
        z-index: 11;
        cursor: pointer;
        box-shadow: -2px 2px 5px rgba(0,0,0,0.1);
        transition: right 0.3s ease;
    }
    
    .toggle-stats-panel:hover {
        background-color: var(--primary-light);
    }
    
    .toggle-stats-panel i {
        color: var(--primary-color);
    }
    
    /* 在较大屏幕上显示切换按钮 */
    @media (min-width: 1201px) {
        .toggle-stats-panel {
            display: block;
        }
    }
    
    /* 在较小屏幕上隐藏切换按钮 */
    @media (max-width: 1200px) {
        .toggle-stats-panel {
            display: none !important;
        }
    }

    /* 为数据概览卡片添加微妙的阴影效果 */
    .stat-item {
        padding: 15px; /* 增加内边距 */
        border-radius: 8px; /* 增加圆角 */
        background: var(--bg-white);
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        margin-bottom: 15px; /* 增加项目间距 */
        transition: all 0.25s ease;
        border: 1px solid #f0f0f0;
    }

    .stat-item:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(0,0,0,0.1);
        border-color: rgba(24, 144, 255, 0.2);
    }

    .stat-item[data-clickable="true"] {
        cursor: pointer;
    }

    .stat-item[data-clickable="true"]:hover {
        background: rgba(24, 144, 255, 0.05);
    }

    .stat-label {
        color: var(--text-secondary);
        font-size: 0.85rem;
        margin-bottom: 8px; /* 增加标签下方间距 */
        font-weight: 500;
    }

    .stat-value {
        font-size: 1.2rem;
        font-weight: 600;
        line-height: 1;
        margin-bottom: 4px;
    }

    .stat-value a {
        display: flex;
        align-items: center;
        color: var(--primary-color) !important;
        text-decoration: none;
        transition: all 0.3s ease;
        font-size: 0.95rem;
    }

    .stat-value a i {
        font-size: 0.85rem;
    }

    /* 匹配率样式优化 */
    .match-rate-container {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .match-rate-value {
        font-size: 1.4rem;
        font-weight: 700;
        color: var(--primary-color);
        margin-bottom: 0.2rem;
        line-height: 1;
        background: linear-gradient(45deg, #1890ff, #52c41a);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }

    .match-rate-detail {
        font-size: 0.8rem;
        color: var(--text-secondary);
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }

    .match-rate-detail i {
        font-size: 0.75rem;
        opacity: 0.7;
    }

    /* 差异标记样式 */
    .difference-badge {
        padding: 2px 8px;
        border-radius: 4px;
        font-size: 0.9rem;
        font-weight: 500;
        display: inline-block;
        white-space: nowrap;
    }

    .difference-badge.success {
        background-color: rgba(82, 196, 26, 0.1);
        color: #52c41a;
    }

    .difference-badge.danger {
        background-color: rgba(255, 77, 79, 0.1);
        color: #ff4d4f;
    }

    .difference-badge.neutral {
        background-color: rgba(24, 144, 255, 0.1);
        color: #1890ff;
    }

    /* 表格样式优化 */
    .comparison-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
    }

    .comparison-table th,
    .comparison-table td {
        padding: 12px;
        text-align: center;
        border-bottom: 1px solid var(--border-color);
    }

    .comparison-table th {
        background: var(--bg-light);
        font-weight: 600;
        color: var(--text-color);
    }

    .comparison-table tr:hover {
        background-color: rgba(24, 144, 255, 0.05);
    }

    .comparison-table tr:last-child td {
        border-bottom: none;
    }

    /* 暗色主题适配 */
    @media (prefers-color-scheme: dark) {
        .difference-badge.success {
            background-color: rgba(82, 196, 26, 0.2);
            color: #73d13d;
        }

        .difference-badge.danger {
            background-color: rgba(255, 77, 79, 0.2);
            color: #ff7875;
        }

        .difference-badge.neutral {
            background-color: rgba(24, 144, 255, 0.2);
            color: #40a9ff;
        }
    }

    /* 高亮效果 */
    @keyframes highlight-pulse {
        0% { box-shadow: 0 0 0 0 rgba(24, 144, 255, 0.7); }
        70% { box-shadow: 0 0 0 10px rgba(24, 144, 255, 0); }
        100% { box-shadow: 0 0 0 0 rgba(24, 144, 255, 0); }
    }

    .highlight-card {
        animation: highlight-pulse 1.5s ease-out;
        border: 1px solid var(--primary-color) !important;
    }

    /* 组织选择器样式 */
    .org-selector-container {
        margin-bottom: 20px;
        padding: 15px 20px;
        background-color: var(--bg-white);
        border-radius: var(--border-radius-lg);
        box-shadow: var(--shadow-sm);
    }
    
    .org-selector-label {
        font-weight: 600;
        margin-bottom: 10px;
        color: var(--text-color);
        font-size: 0.9rem;
    }
    
    .org-selector {
        width: 100%;
        padding: 10px 12px;
        border-radius: 4px;
        border: 1px solid var(--border-color);
        background-color: var(--bg-white);
        color: var(--text-color);
        font-size: 0.9rem;
        height: auto;
    }
    
    .org-selector:focus {
        border-color: var(--primary-color);
        outline: none;
        box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
    }

    /* 增加新样式以保持一致性 */
    .org-selector-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: nowrap;
        gap: 10px;
    }

    .org-selector-form {
        flex: 0 0 auto;
        min-width: 200px;
    }

    .data-overview-btn {
        margin-left: 0;
        padding: 6px 12px;
        background-color: var(--primary-color);
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        font-size: 0.85rem;
        transition: all 0.3s;
        white-space: nowrap;
        height: 32px;
        line-height: 1;
        display: flex;
        align-items: center;
    }

    /* 为顶部标题栏中的选择器添加特殊样式 */
    .card-header .org-selector {
        height: 32px;
        padding: 4px 10px;
        font-size: 0.85rem;
        border-radius: 4px;
    }
    
    /* 为顶部标题栏中的选择器标签添加样式 */
    .card-header .org-selector-label {
        font-size: 0.85rem;
        margin-right: 8px;
        margin-bottom: 0;
        white-space: nowrap;
    }
    
    /* 确保顶部标题栏元素垂直居中 */
    .card-header .d-flex {
        align-items: center;
    }

    .data-overview-btn:hover {
        background-color: var(--primary-dark);
        transform: translateY(-2px);
    }

    /* 确保clearfix在响应式布局中正常工作 */
    .clearfix::after {
        content: "";
        clear: both;
        display: table;
    }

    /* 响应式布局调整 */
    @media (max-width: 992px) {
        .card-header .d-flex {
            flex-direction: column;
            align-items: flex-start;
        }
        
        .card-header .org-selector-row {
            margin-top: 10px;
            width: 100%;
            max-width: 100%;
        }
        
        .card-header .org-selector-form {
            flex: 1;
        }
    }
    
    @media (max-width: 576px) {
        .card-header .org-selector-row {
            flex-direction: column;
            align-items: flex-start;
        }
        
        .card-header .org-selector-form {
            width: 100%;
            margin-bottom: 8px;
        }
        
        .data-overview-btn {
            width: 100%;
            justify-content: center;
        }
    }

    /* 男女比例条形图样式 */
    .gender-ratio-container {
        margin-top: 15px;
        padding: 15px;
        background-color: var(--bg-light);
        border-radius: var(--border-radius-md);
        border: 1px solid var(--gray-200);
    }
    
    .gender-ratio-title {
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--text-color);
        margin-bottom: 10px;
        display: flex;
        align-items: center;
    }
    
    .gender-ratio-title i {
        margin-right: 8px;
        color: var(--primary-color);
    }
    
    .gender-ratio-bar {
        height: 30px;
        background-color: #f0f0f0;
        border-radius: 15px;
        position: relative;
        overflow: hidden;
        margin-bottom: 8px;
    }
    
    .gender-ratio-label {
        font-size: 0.85rem;
        display: flex;
        justify-content: space-between;
        color: var(--gray-600);
    }
    
    .gender-ratio-legend {
        display: flex;
        justify-content: flex-start;
        gap: 20px;
        margin-top: 10px;
        font-size: 0.85rem;
    }
    
    .legend-item {
        display: flex;
        align-items: center;
    }
    
    .legend-color {
        width: 12px;
        height: 12px;
        border-radius: 2px;
        margin-right: 6px;
    }
    
    .ratio-male {
        height: 100%;
        background-color: #4361ee;
        transition: width 0.5s ease;
    }
    
    .ratio-female {
        height: 100%;
        background-color: #FF6B8A;
        transition: width 0.5s ease;
    }

    /* 通用数据可视化组件样式 */
    .data-visualization-container {
        margin-top: 15px;
        padding: 15px;
        background-color: var(--bg-light);
        border-radius: var(--border-radius-md);
        border: 1px solid var(--gray-200);
    }

    .data-visualization-title {
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--text-color);
        margin-bottom: 10px;
        display: flex;
        align-items: center;
    }

    .data-visualization-title i {
        margin-right: 8px;
        color: var(--primary-color);
    }

    .data-comparison-container {
        margin-bottom: 12px;
    }

    .data-comparison-label {
        font-size: 0.85rem;
        display: flex;
        justify-content: space-between;
        color: var(--gray-600);
        margin-bottom: 5px;
    }

    .data-comparison-legend {
        display: flex;
        justify-content: flex-start;
        gap: 20px;
        margin-top: 10px;
        font-size: 0.85rem;
    }

    .data-legend-item {
        display: flex;
        align-items: center;
    }

    .data-legend-color {
        width: 12px;
        height: 12px;
        border-radius: 2px;
        margin-right: 6px;
    }

    /* 通用比率条形图样式 */
    .ratio-bar {
        height: 30px;
        background-color: #f0f0f0;
        border-radius: 15px;
        position: relative;
        overflow: hidden;
        margin-bottom: 8px;
    }

    .ratio-segment {
        height: 100%;
        float: left;
        transition: width 0.5s ease;
    }

    /* 保留特定的性别比例样式，以便与通用样式共存 */
    .gender-ratio-container {
        margin-top: 15px;
        padding: 15px;
        background-color: var(--bg-light);
        border-radius: var(--border-radius-md);
        border: 1px solid var(--gray-200);
    }

    .gender-ratio-title {
        font-size: 0.95rem;
        font-weight: 600;
        color: var(--text-color);
        margin-bottom: 10px;
        display: flex;
        align-items: center;
    }

    .gender-ratio-title i {
        margin-right: 8px;
        color: var(--primary-color);
    }

    .gender-ratio-bar {
        height: 30px;
        background-color: #f0f0f0;
        border-radius: 15px;
        position: relative;
        overflow: hidden;
        margin-bottom: 8px;
    }

    .gender-ratio-label {
        font-size: 0.85rem;
        display: flex;
        justify-content: space-between;
        color: var(--gray-600);
    }

    .gender-ratio-legend {
        display: flex;
        justify-content: flex-start;
        gap: 20px;
        margin-top: 10px;
        font-size: 0.85rem;
    }

    .legend-item {
        display: flex;
        align-items: center;
    }

    .legend-color {
        width: 12px;
        height: 12px;
        border-radius: 2px;
        margin-right: 6px;
    }

    .ratio-male {
        height: 100%;
        background-color: #4361ee;
        transition: width 0.5s ease;
    }

    .ratio-female {
        height: 100%;
        background-color: #FF6B8A;
        transition: width 0.5s ease;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid clearfix">
    <div class="main-content">
        <!-- 数据概览容器 - 添加新的容器 -->
        <div id="data-overview" class="mt-3 mb-4" style="display: none;">
            <!-- 由JavaScript动态填充 -->
        </div>
        
        <!-- 总人数对比 -->
        <div class="card comparison-card" id="total-card">
            <div class="card-header">
                <div class="d-flex justify-content-between align-items-center w-100">
                    <h5 class="mb-0"><i class="fas fa-users me-2"></i>人员信息对比</h5>
                    <div class="org-selector-row" style="max-width: 450px;">
                        <div class="org-selector-form d-flex align-items-center">
                            <div class="org-selector-label">选择组织:</div>
                            <select id="orgSelector" class="org-selector form-select form-select-sm">
                                <option value="">加载中...</option>
                            </select>
                        </div>
                        <div>
                            <button id="dataOverviewBtn" class="data-overview-btn btn-sm">
                                <i class="fas fa-chart-pie me-1"></i> 数据概览
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-body" id="total-comparison">
                <div class="loading-container">
                    <div class="loading-spinner"></div>
                    <div class="loading-text">正在加载数据...</div>
                </div>
            </div>
        </div>

        <!-- 职级分布对比 -->
        <div class="card comparison-card" id="rank-card">
            <div class="card-header">
                <div class="d-flex justify-content-between align-items-center w-100">
                    <h5 class="mb-0"><i class="fas fa-chart-bar me-2"></i>职级分布对比</h5>
                    <select class="form-select form-select-sm" id="series-filter" style="width: auto; min-width: 120px;">
                        <option value="P序列" selected>P序列</option>
                        <option value="M序列">M序列</option>
                        <option value="B序列">B序列</option>
                        <option value="all">全部序列</option>
                    </select>
                </div>
            </div>
            <div class="card-body">
                <div id="rank-comparison">
                    <div class="loading-container">
                        <div class="loading-spinner"></div>
                        <div class="loading-text">正在加载数据...</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 切换按钮 -->
    <div class="toggle-stats-panel" id="toggleStatsBtn">
        <i class="fas fa-chevron-left"></i>
    </div>

    <!-- 右侧统计面板 - 数据概览部分 -->
    <div class="stats-panel">
        <h5><i class="fas fa-chart-pie me-2"></i>数据概览</h5>
        <div class="stat-item" data-clickable="true" data-type="api">
            <div class="stat-label">组织分析详情</div>
            <div class="stat-value" id="api-total-stat">
                <a href="#">
                    <i class="fas fa-external-link-alt me-2"></i>
                    <span>查看详情</span>
                </a>
            </div>
        </div>
        <div class="stat-item" data-clickable="true">
            <div class="stat-label">数据库人员信息</div>
            <div class="stat-value" id="db-total-stat">
                <a href="#">
                    <i class="fas fa-external-link-alt me-2"></i>
                    <span>查看详情</span>
                </a>
            </div>
        </div>
        <div class="stat-item">
            <div class="stat-label">数据匹配率</div>
            <div id="matching-rate-chart" style="height: 200px; margin: 10px 0;"></div>
        </div>

        <!-- 性能监控卡片 -->
        <div class="performance-card">
            <h5><i class="fas fa-server me-2"></i>系统状态</h5>
            <div class="performance-metrics">
                <div class="metric-item">
                    <div class="metric-info">
                        <span class="metric-label">CPU使用率</span>
                        <span class="metric-value" id="cpu-usage">--</span>
                    </div>
                    <div class="metric-chart" id="cpu-chart"></div>
                </div>
                <div class="metric-item">
                    <div class="metric-info">
                        <span class="metric-label">内存使用率</span>
                        <span class="metric-value" id="memory-usage">--</span>
                    </div>
                    <div class="metric-chart" id="memory-chart"></div>
                </div>
                <div class="metric-item">
                    <div class="metric-info">
                        <span class="metric-label">磁盘使用率</span>
                        <span class="metric-value" id="disk-usage">--</span>
                    </div>
                    <div class="metric-chart" id="disk-chart"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 修改模态框结构 -->
<div class="modal fade" id="dbDataModal" tabindex="-1" role="dialog" aria-labelledby="modalTitle" aria-modal="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalTitle">
                    <i class="fas fa-database me-2"></i>
                    数据库人员信息
                </h5>
                <div class="query-time ms-3">
                    <small class="text-muted">
                        <i class="fas fa-clock me-1"></i>查询耗时：<span id="query-time">0</span> ms
                    </small>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
            </div>
            <div class="modal-body">
                <div id="iframe-container" style="display: none;">
                    <iframe id="external-page" 
                            style="width: 100%; height: calc(90vh - 200px); border: none;"
                            sandbox="allow-same-origin allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox"
                            allow="cross-origin-isolated"
                            title="组织分析详情"
                            ></iframe>
                </div>
                <div id="table-container">
                    <div class="table-responsive">
                        <table class="table table-navicat" aria-label="人员数据表格">
                            <thead>
                                <tr id="table-headers"></tr>
                            </thead>
                            <tbody id="table-body"></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script type="module" src="{{ url_for('static', filename='js/main.js') }}"></script>
<script src="{{ url_for('static', filename='js/iframe-handler.js') }}"></script>
<script>
// 组织选择与数据加载
document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM加载完成，开始初始化');
    
    // 获取组织列表
    loadOrganizationList();
    
    // 监听组织选择器变化
    document.getElementById('orgSelector').addEventListener('change', function() {
        const orgId = this.value;
        if (orgId) {
            loadOrganizationData(orgId);
        }
    });
    
    // 监听数据概览按钮点击
    document.getElementById('dataOverviewBtn').addEventListener('click', showDataOverview);
});

// 显示数据概览
function showDataOverview() {
    console.log('显示数据概览');
    
    // 获取数据概览容器
    const overviewContainer = document.getElementById('data-overview');
    if (!overviewContainer) {
        console.error('找不到数据概览容器');
        return;
    }
    
    // 显示数据概览容器
    overviewContainer.style.display = 'block';
    
    // 滚动到数据概览容器
    overviewContainer.scrollIntoView({ behavior: 'smooth' });
    
    // 添加高亮效果
    overviewContainer.classList.add('highlight-card');
    
    // 1.5秒后移除高亮效果
    setTimeout(() => {
        overviewContainer.classList.remove('highlight-card');
    }, 1500);
}

// 获取组织列表并填充下拉框
function loadOrganizationList() {
    console.log('开始获取组织列表');
    const orgSelector = document.getElementById('orgSelector');
    
    // 清空当前选项
    orgSelector.innerHTML = '<option value="">加载中...</option>';
    
    // 获取组织列表
    fetch('/api/organizations')
        .then(response => {
            if (!response.ok) {
                throw new Error(`获取组织列表失败: ${response.status}`);
            }
            return response.json();
        })
        .then(orgs => {
            console.log('获取到组织列表:', orgs);
            
            // 清空选择器
            orgSelector.innerHTML = '';
            
            // 添加默认选项
            const defaultOption = document.createElement('option');
            defaultOption.value = '';
            defaultOption.textContent = '请选择组织';
            orgSelector.appendChild(defaultOption);
            
            // 填充组织选项
            orgs.forEach(org => {
                const option = document.createElement('option');
                option.value = org.belongId;
                option.textContent = org.name;
                orgSelector.appendChild(option);
            });
            
            // 自动选择第一个组织
            if (orgs.length > 0) {
                orgSelector.value = orgs[0].belongId;
                // 触发change事件来加载数据
                const changeEvent = new Event('change');
                orgSelector.dispatchEvent(changeEvent);
            }
        })
        .catch(error => {
            console.error('加载组织列表失败:', error);
            orgSelector.innerHTML = '<option value="">加载失败</option>';
        });
}

// 加载组织数据
function loadOrganizationData(orgId) {
    console.log('=== 开始加载组织数据 ===');
    console.log('传入的组织ID:', orgId);
    
    // 检查参数 - 如果组织ID为空或无效，使用默认ID
    if (!orgId) {
        console.warn('组织ID为空或无效，使用默认ID: 1');
        orgId = '1'; // 确保使用字符串类型
    }
    
    console.log('最终使用的组织ID:', orgId);
    
    // 清空旧数据并显示加载状态
    document.getElementById('total-comparison').innerHTML = `
        <div class="loading-container">
            <div class="loading-spinner"></div>
            <div class="loading-text">正在加载数据...</div>
        </div>
    `;
    
    document.getElementById('rank-comparison').innerHTML = `
        <div class="loading-container">
            <div class="loading-spinner"></div>
            <div class="loading-text">正在加载数据...</div>
        </div>
    `;
    
    // 准备API和数据库数据的URL
    let apiDataUrl = `/api/organization/${orgId}`;
    let dbDataUrl = `/api/db/data?org_id=${orgId}&_t=${Date.now()}`; // 添加时间戳防止缓存
    
    console.log('API数据URL:', apiDataUrl);
    console.log('数据库数据URL:', dbDataUrl);
    
    // 添加调试信息 - 检查是否存在/api/api前缀问题
    console.log('检查调试路由URL: /api/api/debug/total-people?org_id=' + orgId);
    
    // 同时获取API数据和数据库数据
    Promise.all([
        fetch(apiDataUrl).then(response => {
            console.log('API响应状态:', response.status);
            if (!response.ok) {
                throw new Error(`API数据获取失败: ${response.status}`);
            }
            return response.json();
        }),
        fetch(dbDataUrl).then(response => {
            console.log('数据库响应状态:', response.status);
            console.log('数据库数据URL (再次确认):', dbDataUrl);
            
            if (!response.ok) {
                console.warn(`数据库数据获取失败: ${response.status}`);
                return null; // 允许数据库数据缺失
            }
            
            // 记录原始响应
            response.clone().text().then(text => {
                console.log('数据库响应原始内容:', text.substring(0, 500) + (text.length > 500 ? '...' : ''));
                try {
                    const jsonData = JSON.parse(text);
                    console.log('数据库响应解析为JSON:', jsonData);
                    
                    // 特别检查total_count字段
                    if (jsonData && jsonData.data) {
                        console.log('数据库数据中的data字段:', jsonData.data);
                        console.log('数据库数据中的total_count字段:', jsonData.data.total_count);
                        console.log('total_count类型:', typeof jsonData.data.total_count);
                    }
                } catch(e) {
                    console.error('解析数据库响应为JSON失败:', e);
                }
            });
            
            return response.json();
        }).catch(error => {
            console.warn('获取数据库数据时出错:', error);
            return null; // 允许数据库数据缺失
        }),
        
        // 添加调试路由请求，直接验证数据库查询
        fetch(`/api/api/debug/total-people?org_id=${orgId}`).then(response => {
            console.log('调试路由响应状态:', response.status);
            if (!response.ok) {
                console.warn(`调试路由请求失败: ${response.status}`);
                return null;
            }
            
            // 记录调试路由的原始响应
            response.clone().text().then(text => {
                console.log('调试路由原始响应:', text.substring(0, 500) + (text.length > 500 ? '...' : ''));
                try {
                    const jsonData = JSON.parse(text);
                    console.log('调试路由响应JSON:', jsonData);
                    
                    // 保存调试数据以供后续使用
                    window.lastDebugData = jsonData;
                    
                    if (jsonData && jsonData.result) {
                        console.log('调试路由中的结果:', jsonData.result);
                        console.log('SQL查询:', jsonData.sql_query);
                    }
                } catch(e) {
                    console.error('解析调试路由响应为JSON失败:', e);
                }
            });
            
            return response.json();
        }).catch(error => {
            console.warn('调试路由请求出错:', error);
            return null;
        })
    ])
    .then(([apiData, dbData, debugData]) => {
        console.log('=== 数据获取完成 ===');
        console.log('API数据获取成功:', apiData);
        console.log('数据库数据获取状态:', dbData ? '成功' : '失败或缺失');
        console.log('调试路由数据:', debugData);
        
        if (dbData) {
            console.log('获取到的数据库数据(详细):', JSON.stringify(dbData, null, 2));
            console.log('数据库数据结构:', Object.keys(dbData));
            
            if (dbData.data) {
                console.log('数据库数据内部结构:', Object.keys(dbData.data));
                console.log('数据库总人数字段值:', dbData.data.total_count);
                console.log('数据库总人数字段类型:', typeof dbData.data.total_count);
            }
        } else {
            console.error('未获取到数据库数据');
        }
        
        // 更新组织数据显示，传递API数据和数据库数据
        updateOrganizationData({
            apiData: apiData.data,
            dbData: dbData
        });
        
        // 加载职级分布对比数据
        loadRankComparison(orgId);
    })
    .catch(error => {
        console.error('加载组织数据时出错:', error);
        showErrorState(error.message);
    });
}

// 加载职级分布对比数据
function loadRankComparison(orgId) {
    console.log('加载职级分布对比数据, 组织ID:', orgId);
    
    // 查找职级分布图表容器
    const rankComparisonElement = document.getElementById('rank-comparison');
    if (!rankComparisonElement) {
        console.warn('找不到rank-comparison元素');
        return;
    }
    
    // 请求职级分布对比数据
    fetch(`/api/comparison/rank?org_id=${orgId}`)
        .then(response => response.json())
        .then(data => {
            console.log('获取到职级分布数据:', data);
            
            // 检查数据格式
            if (!data || !data.data) {
                console.error('职级分布数据格式无效');
                return;
            }
            
            // 获取当前选择的职级序列
            const seriesType = document.getElementById('series-filter')?.value || 'all';
            
            // 渲染职级分布图表
            renderRankChart(rankComparisonElement, data.data, seriesType);
        })
        .catch(error => {
            console.error('获取职级分布数据失败:', error);
            rankComparisonElement.innerHTML = `
                <div class="alert alert-danger">
                    获取职级分布数据失败: ${error.message}
                </div>
            `;
        });
}

// 渲染职级分布图表
function renderRankChart(container, data, seriesType) {
    console.log('渲染职级分布图表, 类型:', seriesType);
    console.log('图表数据:', data);
    
    // 清空容器
    container.innerHTML = '';
    
    // 创建图表容器
    const chartDiv = document.createElement('div');
    chartDiv.className = 'chart-container';
    chartDiv.style.height = '400px';
    container.appendChild(chartDiv);
    
    // 创建图表实例
    const chart = echarts.init(chartDiv);
    
    // 提取数据
    const ranks = data.ranks || [];
    const apiCounts = data.api_counts || [];
    const dbCounts = data.db_counts || [];
    
    // 设置图表选项
    const option = {
        title: {
            text: `${seriesType}职级分布对比`,
            left: 'center'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            formatter: function(params) {
                const rankIndex = params[0].dataIndex;
                const rank = ranks[rankIndex];
                const apiCount = apiCounts[rankIndex] || 0;
                const dbCount = dbCounts[rankIndex] || 0;
                const diff = Math.abs(apiCount - dbCount);
                const matched = apiCount === dbCount;
                
                let html = `<div style="padding: 8px;">`;
                html += `<div style="margin-bottom: 5px;"><strong>${rank}</strong></div>`;
                html += `<div>API数据: <strong>${apiCount}</strong> 人</div>`;
                html += `<div>数据库: <strong>${dbCount}</strong> 人</div>`;
                html += `<div>差异: <strong style="color:${matched ? '#52c41a' : '#ff4d4f'}">${diff}</strong> 人</div>`;
                html += `<div>匹配状态: <span style="color:${matched ? '#52c41a' : '#ff4d4f'}">${matched ? '✓ 匹配' : '✗ 不匹配'}</span></div>`;
                html += `</div>`;
                
                return html;
            }
        },
        legend: {
            data: ['API数据', '数据库数据'],
            top: 'bottom'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '12%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: ranks,
            axisLabel: {
                interval: 0,
                rotate: ranks.length > 6 ? 30 : 0
            }
        },
        yAxis: {
            type: 'value',
            name: '人数'
        },
        series: [
            {
                name: 'API数据',
                type: 'bar',
                data: apiCounts,
                itemStyle: {
                    color: '#1890ff'
                }
            },
            {
                name: '数据库数据',
                type: 'bar',
                data: dbCounts,
                itemStyle: {
                    color: '#52c41a'
                }
            }
        ]
    };
    
    // 设置图表选项
    chart.setOption(option);
    
    // 添加图表说明
    const chartInfo = document.createElement('div');
    chartInfo.className = 'text-center mt-3';
    chartInfo.innerHTML = `
        <p class="text-muted">
            <small>图表展示了不同职级的人数分布对比。通过对比API数据和数据库数据，可以发现数据不一致的地方。</small>
        </p>
    `;
    container.appendChild(chartInfo);
    
    // 监听窗口大小变化，调整图表大小
    window.addEventListener('resize', function() {
        chart.resize();
    });
    
    // 监听series-filter变化，重新加载图表
    document.getElementById('series-filter').addEventListener('change', function() {
        const newSeriesType = this.value;
        const orgId = document.getElementById('orgSelector').value;
        console.log(`系列类型变更为: ${newSeriesType}, 正在重新加载数据...`);
        
        // 显示加载状态
        container.innerHTML = `
            <div class="loading-container">
                <div class="loading-spinner"></div>
                <div class="loading-text">正在加载${newSeriesType}数据...</div>
            </div>
        `;
        
        // 重新加载数据
        loadRankComparison(orgId);
    });
}

// 显示加载状态
function showLoadingState() {
    const contentAreas = document.querySelectorAll('.card-body');
    contentAreas.forEach(area => {
        area.innerHTML = `
            <div class="loading-container">
                <div class="loading-spinner"></div>
                <div class="loading-text">加载中...</div>
            </div>
        `;
    });
}

// 隐藏加载状态
function hideLoadingState() {
    console.log('隐藏加载状态');
    
    // 清除所有加载动画
    const loadingContainers = document.querySelectorAll('.loading-container');
    console.log(`找到 ${loadingContainers.length} 个加载容器`);
    
    loadingContainers.forEach(container => {
        console.log('移除加载容器', container);
        // 尝试多种方式移除加载状态
        try {
            // 方法1: 移除父元素的loading类
            if (container.parentNode) {
                container.parentNode.classList.remove('loading');
                console.log('从父元素移除loading类');
            }
            
            // 方法2: 直接隐藏加载容器
            container.style.display = 'none';
            console.log('设置加载容器display为none');
            
            // 方法3: 从父元素中移除加载容器
            if (container.parentNode) {
                // 创建一个空的div作为替代内容
                const emptyDiv = document.createElement('div');
                container.parentNode.replaceChild(emptyDiv, container);
                console.log('替换了加载容器');
            }
        } catch (e) {
            console.error('移除加载状态时出错:', e);
        }
    });
    
    // 清除任何残留的加载动画
    const cardBodies = document.querySelectorAll('.card-body');
    cardBodies.forEach(card => {
        if (card.querySelector('.loading-container')) {
            console.log('找到残留的加载容器，清空内容');
            card.innerHTML = '';
        }
    });
}

// 显示错误状态
function showErrorState(message) {
    const contentAreas = document.querySelectorAll('.card-body');
    contentAreas.forEach(area => {
        area.innerHTML = `
            <div class="alert alert-danger">
                获取数据失败，请稍后重试。
            </div>
        `;
    });
}

// 更新组织数据显示
function updateOrganizationData(data) {
    console.log('updateOrganizationData被调用，数据：', data);
    
    // 检查数据是否为空
    if (!data) {
        console.error('接收到空数据');
        showErrorState();
        return;
    }
    
    try {
        // 解构数据
        const { apiData, dbData } = data;
        
        // 记录每个组件处理开始
        console.log('-------------- 开始更新组织数据 --------------');
        
        // 确保至少有API数据
        if (!apiData) {
            console.error('没有找到API数据');
            showErrorState();
            return;
        }
        
        console.log('1. 开始更新数据概览区域');
        // 更新数据概览区域
        if (typeof updateDataOverview === 'function') {
            updateDataOverview(apiData);
            console.log('1. 数据概览区域更新完成');
        } else {
            console.warn('updateDataOverview函数未定义，跳过数据概览更新');
        }
        
        console.log('2. 开始更新人员信息对比区域');
        // 更新人员信息对比区域
        updatePeopleComparison(apiData, dbData);
        console.log('2. 人员信息对比区域更新完成');
        
        console.log('3. 开始清除加载状态');
        // 清除加载状态
        hideLoadingState();
        console.log('3. 加载状态清除完成');
        
        console.log('-------------- 组织数据更新完成 --------------');
    } catch (error) {
        console.error('更新组织数据时出错:', error);
        console.error('错误堆栈:', error.stack);
        showErrorState();
    }
}

// 处理SQL查询结果，转换为前端所需的格式
// 注：此函数用于后端开发人员参考，实际应在后端处理
function processSqlGenderRatioData(sqlResult) {
    // sqlResult 应该是一个包含belongId和textValue字段的对象数组
    // 例如：[{belongId: 1, textValue: "1:0.85"}, {belongId: 2, textValue: "1:1.2"}]
    
    console.log('处理SQL性别比例数据:', sqlResult);
    
    // 将SQL结果转换为以belongId为键的对象
    const processedData = {};
    
    if (Array.isArray(sqlResult)) {
        sqlResult.forEach(item => {
            if (item && item.belongId) {
                processedData[item.belongId] = {
                    genderRatio: item.textValue || '1:1' // 默认值为1:1
                };
            }
        });
    }
    
    console.log('处理后的性别比例数据:', processedData);
    return processedData;
}

/**
 * 通用SQL数据处理方法 - 后端参考实现
 * @param {Array} sqlResult SQL查询结果数组
 * @param {Object} fieldMapping 字段映射配置
 * @param {String} primaryKeyField 主键字段名称
 * @returns {Object} 处理后的数据对象，以主键为键
 */
function processSqlDataGeneric(sqlResult, fieldMapping, primaryKeyField = 'belongId') {
    // sqlResult: SQL查询结果数组
    // fieldMapping: {sqlField: 'frontEndField', ...} 字段映射
    // primaryKeyField: 主键字段名称，默认为'belongId'
    
    console.log(`处理SQL数据 (主键: ${primaryKeyField}, 映射: ${JSON.stringify(fieldMapping)}):`);
    console.log(sqlResult);
    
    if (!sqlResult || !Array.isArray(sqlResult) || sqlResult.length === 0) {
        console.warn('SQL数据为空或格式不正确');
        return {};
    }
    
    // 将SQL结果转换为以主键为键的对象
    const processedData = {};
    
    sqlResult.forEach(item => {
        if (item && item[primaryKeyField]) {
            const key = item[primaryKeyField];
            processedData[key] = {};
            
            // 应用字段映射
            Object.entries(fieldMapping).forEach(([sqlField, frontEndField]) => {
                if (item[sqlField] !== undefined) {
                    processedData[key][frontEndField] = item[sqlField];
                }
            });
        }
    });
    
    console.log('处理后的数据:', processedData);
    return processedData;
}

/**
 * 合并SQL数据到主数据对象 - 后端参考实现
 * @param {Object} mainData 主数据对象
 * @param {Object} sqlData SQL处理后的数据
 * @param {String|Number} entityId 当前实体ID
 * @param {String} dataContainer 主数据中存放目标数据的容器属性名
 * @returns {Object} 合并后的数据对象
 */
function mergeSqlData(mainData, sqlData, entityId, dataContainer = 'data') {
    if (!mainData || !sqlData) return mainData;
    
    console.log(`合并SQL数据 (实体ID: ${entityId}, 数据容器: ${dataContainer})`);
    
    // 制作数据的深拷贝，避免修改原始对象
    const mergedData = JSON.parse(JSON.stringify(mainData));
    
    // 如果存在当前实体的数据，合并到主数据中
    if (sqlData[entityId]) {
        // 确保数据容器存在
        if (!mergedData[dataContainer]) mergedData[dataContainer] = {};
        
        // 合并所有字段
        Object.entries(sqlData[entityId]).forEach(([field, value]) => {
            mergedData[dataContainer][field] = value;
        });
        
        console.log('合并后的数据:', mergedData);
    } else {
        console.log(`未找到实体ID ${entityId} 的数据，不进行合并`);
    }
    
    return mergedData;
}

/**
 * 生成通用数据可视化HTML - 前端方法
 * @param {Object} config 可视化配置
 * @returns {String} 生成的HTML字符串
 */
function generateDataVisualizationHtml(config) {
    // 配置示例:
    // {
    //   id: 'gender-ratio',                // 唯一标识符
    //   title: '男女比例可视化',            // 标题
    //   icon: 'fas fa-venus-mars',         // 图标类名
    //   apiLabel: 'API数据',               // API数据标签
    //   dbLabel: '数据库数据',              // 数据库数据标签
    //   segments: [                        // 段落配置
    //     { id: 'male', color: '#4361ee', label: '男性' },
    //     { id: 'female', color: '#FF6B8A', label: '女性' }
    //   ],
    //   defaultValue: '1:1'                // 默认值
    // }
    
    if (!config || !config.id || !config.segments || config.segments.length === 0) {
        console.error('可视化配置无效');
        return '';
    }
    
    const { id, title, icon, apiLabel = 'API数据', dbLabel = '数据库数据', segments, defaultValue = '' } = config;
    
    // 生成图例HTML
    let legendHtml = '';
    segments.forEach(segment => {
        legendHtml += `
            <div class="data-legend-item">
                <div class="data-legend-color" style="background-color: ${segment.color};"></div>
                <span>${segment.label}</span>
            </div>
        `;
    });
    
    // 生成可视化HTML
    return `
        <div class="data-visualization-container" id="${id}-container">
            <div class="data-visualization-title">
                <i class="${icon}"></i>${title}
            </div>
            <div class="ratio-bar" id="${id}-bar">
                ${segments.map(segment => `<div class="ratio-segment" id="${id}-${segment.id}" style="background-color: ${segment.color}; width: 0%;"></div>`).join('')}
            </div>
            <div class="data-comparison-label">
                <div>${apiLabel}: <span id="${id}-api-value">加载中...</span></div>
                <div>${dbLabel}: <span id="${id}-db-value">加载中...</span></div>
            </div>
            <div class="data-comparison-legend">
                ${legendHtml}
            </div>
        </div>
    `;
}

/**
 * 更新数据可视化显示 - 前端方法
 * @param {String} id 可视化组件ID
 * @param {String} apiValue API数据值
 * @param {String} dbValue 数据库数据值
 * @param {Function} parseValueFn 解析值的函数
 */
function updateDataVisualization(id, apiValue, dbValue, parseValueFn) {
    // id: 可视化组件的ID
    // apiValue: API数据值
    // dbValue: 数据库数据值
    // parseValueFn: 函数，解析数据值并返回段落宽度百分比，形式为 [{id: 'segmentId', width: 50}, ...]
    
    console.log(`更新数据可视化 ${id}:`, { apiValue, dbValue });
    
    // 更新显示文本
    const apiValueEl = document.getElementById(`${id}-api-value`);
    const dbValueEl = document.getElementById(`${id}-db-value`);
    
    if (apiValueEl) apiValueEl.textContent = apiValue || '未知';
    if (dbValueEl) dbValueEl.textContent = dbValue || '未知';
    
    // 如果提供了解析函数，更新可视化
    if (typeof parseValueFn === 'function') {
        try {
            // 解析API值
            const apiSegments = parseValueFn(apiValue);
            
            // 更新API数据可视化
            if (Array.isArray(apiSegments)) {
                apiSegments.forEach(segment => {
                    const el = document.getElementById(`${id}-${segment.id}`);
                    if (el) {
                        el.style.width = `${segment.width}%`;
                        el.title = `${segment.label || segment.id}: ${segment.width.toFixed(1)}%`;
                    }
                });
            }
        } catch (error) {
            console.error(`解析和更新 ${id} 可视化时出错:`, error);
        }
    }
}

/**
 * 解析比率值 (1:X格式) - 前端方法
 * @param {String} ratioValue 比率值字符串，如 "1:0.8"
 * @param {Array} segments 段落配置
 * @returns {Array} 段落宽度配置
 */
function parseRatioValue(ratioValue, segments) {
    // 检查参数
    if (!ratioValue || typeof ratioValue !== 'string' || !Array.isArray(segments) || segments.length !== 2) {
        // 默认返回相等的宽度
        return segments.map(segment => ({
            id: segment.id,
            width: 50,
            label: segment.label
        }));
    }
    
    // 解析比率值，假设格式为 "1:X"
    try {
        const parts = ratioValue.split(':');
        if (parts.length !== 2) {
            throw new Error(`无效的比率格式: ${ratioValue}`);
        }
        
        const firstValue = parseFloat(parts[0]) || 1;
        const secondValue = parseFloat(parts[1]) || 1;
        const total = firstValue + secondValue;
        
        // 计算百分比
        const firstPercent = (firstValue / total) * 100;
        const secondPercent = (secondValue / total) * 100;
        
        // 返回配置
        return [
            { id: segments[0].id, width: firstPercent, label: segments[0].label },
            { id: segments[1].id, width: secondPercent, label: segments[1].label }
        ];
    } catch (error) {
        console.error(`解析比率值出错: ${error.message}`);
        // 失败时返回默认值
        return segments.map(segment => ({
            id: segment.id,
            width: 50,
            label: segment.label
        }));
    }
}

// 使用示例 - 男女比例可视化
function createGenderRatioVisualization(container) {
    if (!container) return;
    
    // 定义男女比例可视化配置
    const genderRatioConfig = {
        id: 'gender-ratio',
        title: '男女比例可视化',
        icon: 'fas fa-venus-mars',
        apiLabel: 'API数据',
        dbLabel: '数据库数据',
        segments: [
            { id: 'male', color: '#4361ee', label: '男性' },
            { id: 'female', color: '#FF6B8A', label: '女性' }
        ],
        defaultValue: '1:1'
    };
    
    // 生成HTML并添加到容器
    const html = generateDataVisualizationHtml(genderRatioConfig);
    container.insertAdjacentHTML('beforeend', html);
}

// 更新男女比例可视化
function updateGenderRatioVisualization(apiData, dbData) {
    console.log('更新男女比例可视化');
    console.log('API数据:', apiData);
    console.log('数据库数据:', dbData);
    
    // 从API数据中获取男女比例
    let apiRatio = '未知';
    if (apiData && apiData['男女比例']) {
        apiRatio = apiData['男女比例'];
    }
    
    // 从数据库数据中获取男女比例
    // 这里应该接收来自后端SQL查询的结果
    let dbRatio = '未知';
    if (dbData && dbData['gender_ratio']) {
        dbRatio = dbData['gender_ratio'];
    }
    
    // 定义男女比例段落
    const genderSegments = [
        { id: 'male', color: '#4361ee', label: '男性' },
        { id: 'female', color: '#FF6B8A', label: '女性' }
    ];
    
    // 使用通用方法更新可视化
    updateDataVisualization(
        'gender-ratio', 
        apiRatio, 
        dbRatio, 
        (value) => parseRatioValue(value, genderSegments)
    );
}

// 使用示例 - 年龄分布可视化
function createAgeDistributionVisualization(container) {
    if (!container) return;
    
    // 定义年龄分布可视化配置
    const ageDistConfig = {
        id: 'age-distribution',
        title: '年龄分布可视化',
        icon: 'fas fa-birthday-cake',
        apiLabel: 'API数据',
        dbLabel: '数据库数据',
        segments: [
            { id: 'young', color: '#10B981', label: '35岁以下' },
            { id: 'middle', color: '#3B82F6', label: '35-45岁' },
            { id: 'senior', color: '#6366F1', label: '45岁以上' }
        ]
    };
    
    // 生成HTML并添加到容器
    const html = generateDataVisualizationHtml(ageDistConfig);
    container.insertAdjacentHTML('beforeend', html);
}

// 合并SQL性别比例数据到现有数据库数据
// 注：此函数用于后端开发人员参考，实际应在后端处理
function mergeGenderRatioData(dbData, genderRatioData, orgId) {
    if (!dbData || !genderRatioData) return dbData;
    
    // 制作数据的深拷贝，避免修改原始对象
    const mergedData = JSON.parse(JSON.stringify(dbData));
    
    // 如果存在当前组织的性别比例数据，合并到数据库数据中
    if (genderRatioData[orgId]) {
        if (!mergedData.data) mergedData.data = {};
        mergedData.data.gender_ratio = genderRatioData[orgId].gender_ratio;
    }
    
    return mergedData;
}

// 更新人员信息对比区域
function updatePeopleComparison(apiData, dbData) {
    console.log('=== 更新人员信息对比 ===');
    console.log('API数据:', apiData);
    console.log('数据库数据:', dbData);
    
    // 使用现有的人员信息对比卡片，而不是创建新的
    const totalComparisonContainer = document.getElementById('total-comparison');
    if (!totalComparisonContainer) {
        console.error('找不到total-comparison容器');
        return;
    }
    
    // 如果API数据或dbData不存在，显示更清晰的加载状态
    if (!apiData) {
        totalComparisonContainer.innerHTML = `
            <div class="loading-container">
                <div class="loading-spinner"></div>
                <div class="loading-text">正在加载API数据...</div>
            </div>
        `;
        return;
    }
    
    // 创建人员对比HTML
    let tableHtml = '';
    
    // 映射字段名称到数据库字段
    const fieldMapping = {
        '总人数': 'total_count',
        '正式工总人数': 'formal_count',
        '试用期人数': 'probation_count',
        '男女比例': 'gender_ratio',
        '平均年龄': 'avg_age',
        '平均司龄': 'avg_tenure',
        '管理岗人数': 'manager_count',
        '党员比例': 'party_ratio',
        '校招生比例': 'campus_ratio',
        '近一年新员工比例': 'new_employee_ratio',
        '近一年离职率': 'turnover_rate',
        '官兵比': 'officer_ratio',
        '平均汇报深度': 'avg_report_depth',
        '平均管理幅度': 'avg_management_span'
    };
    
    // 打印这些映射以便调试
    console.log('字段映射:', fieldMapping);
    
    // 添加表格行
    const apiMetrics = {
        '总人数': apiData['总人数'] || '未知',
        '正式工总人数': apiData['正式工总人数'] || '未知',
        '试用期人数': apiData['试用期人数'] || '未知',
        '男女比例': apiData['男女比例'] || '未知',
        '平均年龄': apiData['平均年龄'] || '未知',
        '平均司龄': apiData['平均司龄'] || '未知',
        '管理岗人数': apiData['管理岗人数'] || '未知',
        '党员比例': apiData['党员比例'] || '未知',
        '校招生比例': apiData['校招生比例'] || '未知',
        '近一年新员工比例': apiData['近一年新员工比例'] || '未知',
        '近一年离职率': apiData['近一年离职率'] || '未知',
        '官兵比': apiData['官兵比'] || '未知',
        '平均汇报深度': apiData['平均汇报深度'] || '未知',
        '平均管理幅度': apiData['平均管理幅度'] || '未知'
    };
    
    // 打印API指标以便调试
    console.log('API指标:', apiMetrics);
    
    // 获取数据库指标（如果有）
    let dbMetrics = {};
    
    // 详细记录数据库数据处理过程
    console.log('开始处理数据库数据');
    console.log('=== 数据库数据处理跟踪 ===');
    
    if (dbData) {
        console.log('数据库数据存在，类型:', typeof dbData);
        console.log('数据库数据完整结构:', JSON.stringify(dbData, null, 2));
        
        // 获取调试数据中的total_count
        let debugTotalCount = '未知';
        
        // 尝试从调试路由获取total_count
        try {
            // 检查全局变量或最近的fetch请求是否有调试数据
            const debugElement = document.querySelector('#debug-data');
            if (debugElement && debugElement.textContent) {
                const debugData = JSON.parse(debugElement.textContent);
                console.log('找到调试数据元素:', debugData);
                if (debugData.result && debugData.result.total_count) {
                    debugTotalCount = debugData.result.total_count;
                    console.log('从调试元素获取总人数:', debugTotalCount);
                }
            } else {
                // 如果没有调试元素，尝试从window对象获取
                if (window.lastDebugData && window.lastDebugData.result) {
                    debugTotalCount = window.lastDebugData.result.total_count;
                    console.log('从window.lastDebugData获取总人数:', debugTotalCount);
                }
            }
        } catch (e) {
            console.error('获取调试数据失败:', e);
        }
        
        // 检查数据库数据的详细结构
        if (typeof dbData === 'object') {
            console.log('数据库数据是对象类型，键:', Object.keys(dbData));
            
            // 检查success字段和data字段
            if (dbData.success && dbData.data && typeof dbData.data === 'object' && !Array.isArray(dbData.data)) {
                console.log('找到标准格式的数据: success=true, data存在且是对象');
                console.log('data类型:', typeof dbData.data);
                console.log('完整data内容:', JSON.stringify(dbData.data, null, 2));
                
                // 直接检查total_count字段
                const directTotalCount = dbData.data.total_count;
                console.log('直接从dbData.data中的total_count:', directTotalCount);
                console.log('total_count字段类型:', typeof directTotalCount);
                
                dbMetrics = dbData.data;
                console.log('使用dbData.data作为dbMetrics，包含字段:', Object.keys(dbMetrics));
                
                // 验证total_count是否可以正确获取
                console.log('验证从dbMetrics获取total_count:', dbMetrics.total_count);
                console.log('验证从fieldMapping获取总人数对应字段:', fieldMapping['总人数']);
                console.log('通过映射获取total_count值:', dbMetrics[fieldMapping['总人数']]);
            } else if (dbData.data && Array.isArray(dbData.data)) {
                // 如果data是数组（人员列表），使用数组长度作为总人数
                console.log('数据库data是数组，长度:', dbData.data.length);
                const arrayLength = dbData.data.length;
                
                // 创建新的dbMetrics对象，只设置total_count为数组长度，其他保持为"未知"
                dbMetrics = {
                    'total_count': arrayLength.toString(),
                    'formal_count': '未知',
                    'probation_count': '未知',
                    'manager_count': '未知'
                };
                
                // 如果有调试数据中的total_count，优先使用它
                if (debugTotalCount !== '未知') {
                    dbMetrics.total_count = debugTotalCount;
                    console.log('使用调试数据中的总人数:', debugTotalCount);
                }
                
                console.log('创建的dbMetrics:', dbMetrics);
            } else {
                console.log('没有找到标准格式的数据');
                
                // 如果没有标准格式，尝试直接使用dbData
                if (dbData.data) {
                    console.log('找到data字段，但格式不符合预期');
                    console.log('data内容:', dbData.data);
                    
                    // 检查data是否是非数组对象
                    if (typeof dbData.data === 'object' && !Array.isArray(dbData.data)) {
                        dbMetrics = dbData.data;
                    } else {
                        // 如果是数组，创建一个带有total_count的新对象
                        dbMetrics = { 'total_count': Array.isArray(dbData.data) ? dbData.data.length.toString() : '未知' };
                        
                        // 如果有调试数据中的total_count，优先使用它
                        if (debugTotalCount !== '未知') {
                            dbMetrics.total_count = debugTotalCount;
                        }
                    }
                } else {
                    console.log('没有找到data字段，尝试直接使用dbData');
                    
                    // 直接使用dbData，如果它本身是对象
                    if (typeof dbData === 'object' && !Array.isArray(dbData)) {
                        dbMetrics = dbData;
                    } else {
                        // 如果是数组，创建一个带有total_count的新对象
                        dbMetrics = { 'total_count': Array.isArray(dbData) ? dbData.length.toString() : '未知' };
                        
                        // 如果有调试数据中的total_count，优先使用它
                        if (debugTotalCount !== '未知') {
                            dbMetrics.total_count = debugTotalCount;
                        }
                    }
                }
                
                console.log('最终使用的dbMetrics:', dbMetrics);
            }
        } else {
            console.warn('数据库数据不是对象类型:', typeof dbData);
            
            // 将非对象类型转换为对象，并使用调试数据的total_count
            dbMetrics = { 'total_count': debugTotalCount !== '未知' ? debugTotalCount : '未知' };
        }
    } else {
        console.warn('数据库数据不可用:', dbData);
        
        // 使用调试路由结果
        fetch(`/api/api/debug/total-people?org_id=${document.getElementById('orgSelector').value || '1'}`)
            .then(response => response.json())
            .then(debugData => {
                if (debugData && debugData.result && debugData.result.total_count) {
                    console.log('从调试路由获取总人数:', debugData.result.total_count);
                    // 存储调试数据以供后续使用
                    window.lastDebugData = debugData;
                    // 重新加载表格
                    updatePeopleComparison(apiData, { data: { total_count: debugData.result.total_count } });
                }
            })
            .catch(error => console.error('获取调试数据失败:', error));
    }
    
    // 检查解析后的dbMetrics
    console.log('最终处理后的数据库指标:', dbMetrics);
    console.log('是否有total_count:', dbMetrics && dbMetrics.total_count !== undefined);
    if (dbMetrics && dbMetrics.total_count !== undefined) {
        console.log('total_count值:', dbMetrics.total_count);
        console.log('total_count类型:', typeof dbMetrics.total_count);
    }
    console.log('=== 数据库数据处理完成 ===');
    
    // 统一表格头部样式
    tableHtml = `
        <div class="table-responsive">
            <table class="comparison-table">
                <thead>
                    <tr>
                        <th>指标名称</th>
                        <th>API数据</th>
                        <th>数据库数据</th>
                        <th>最佳匹配</th>
                    </tr>
                </thead>
                <tbody>
    `;
    
    for (const [metric, apiValue] of Object.entries(apiMetrics)) {
        // 获取对应的数据库值
        const dbFieldName = fieldMapping[metric] || '';
        let dbValue = '未知';
        
        // 详细记录每个字段的处理
        console.log(`处理指标 ${metric}, 对应数据库字段 ${dbFieldName}`);
        
        // 特殊处理总人数，如果有调试数据的total_count，优先使用它
        if (metric === '总人数' && window.lastDebugData && window.lastDebugData.result) {
            const debugTotalCount = window.lastDebugData.result.total_count;
            if (debugTotalCount) {
                dbValue = debugTotalCount;
                console.log(`使用调试数据中的总人数: ${debugTotalCount}`);
            }
        } 
        // 检查数据库值是否存在且不为0
        else if (dbFieldName && dbMetrics) {
            console.log(`检查数据库值 ${dbFieldName}:`, dbMetrics[dbFieldName]);
            
            if (dbMetrics[dbFieldName] !== undefined) {
                if (dbMetrics[dbFieldName] === 0) {
                    dbValue = '0'; // 显示零值
                    console.log(`${dbFieldName} 是零值`);
                } else if (dbMetrics[dbFieldName] === null) {
                    dbValue = '未知'; // NULL值显示为未知
                    console.log(`${dbFieldName} 是NULL值`);
                } else if (dbMetrics[dbFieldName] !== '') {
                    dbValue = dbMetrics[dbFieldName];
                    console.log(`${dbFieldName} 有值:`, dbValue);
                } else {
                    console.log(`${dbFieldName} 是空字符串`);
                }
            } else {
                console.log(`${dbFieldName} 在数据库结果中不存在`);
            }
        } else {
            console.log(`数据库指标不存在或字段映射不存在: ${dbFieldName}`);
        }
        
        // 判断是否匹配
        let isMatch = false;
        let matchDisplay = '—';
        
        if (apiValue !== '未知' && dbValue !== '未知') {
            // 尝试标准化值进行比较
            const normalizedApiValue = String(apiValue).trim();
            const normalizedDbValue = String(dbValue).trim();
            
            isMatch = normalizedApiValue === normalizedDbValue;
            console.log(`比较: API值 "${normalizedApiValue}" vs DB值 "${normalizedDbValue}" - 匹配: ${isMatch}`);
            
            matchDisplay = isMatch ? 
                '<span class="badge bg-success">匹配</span>' : 
                '<span class="badge bg-danger">不匹配</span>';
        } else {
            console.log(`无法比较: API值 "${apiValue}" 或 DB值 "${dbValue}" 是未知的`);
        }
        
        // 生成样式类名
        const rowClass = isMatch ? 'match' : (dbValue !== '未知' ? 'mismatch' : '');
        
        tableHtml += `
            <tr class="${rowClass}">
                <td>${metric}</td>
                <td>${apiValue}</td>
                <td>${dbValue}</td>
                <td>${matchDisplay}</td>
            </tr>
        `;
    }
    
    tableHtml += `
                </tbody>
            </table>
        </div>
    `;
    
    // 添加男女比例可视化部分
    let genderRatioHtml = `
        <div class="gender-ratio-container">
            <div class="gender-ratio-title">
                <i class="fas fa-venus-mars"></i>男女比例可视化
            </div>
            <div class="gender-ratio-bar">
                <div class="ratio-male" style="width: 50%; float: left;"></div>
                <div class="ratio-female" style="width: 50%; float: left;"></div>
            </div>
            <div class="gender-ratio-label">
                <div>API数据: <span id="api-gender-ratio">加载中...</span></div>
                <div>数据库数据: <span id="db-gender-ratio">加载中...</span></div>
            </div>
            <div class="gender-ratio-legend">
                <div class="legend-item">
                    <div class="legend-color" style="background-color: #4361ee;"></div>
                    <span>男性</span>
                </div>
                <div class="legend-item">
                    <div class="legend-color" style="background-color: #FF6B8A;"></div>
                    <span>女性</span>
                </div>
            </div>
        </div>
    `;
    
    // 更新DOM - 添加表格和男女比例可视化
    totalComparisonContainer.innerHTML = tableHtml + genderRatioHtml;
    
    // 更新男女比例可视化
    updateGenderRatioVisualization(apiData, dbMetrics);
    
    // 确保表格样式应用
    if (!document.getElementById('comparison-table-style')) {
        const styleHtml = `
            <style id="comparison-table-style">
                .comparison-table {
                    width: 100%;
                    border-collapse: separate;
                    border-spacing: 0;
                    margin-bottom: 0;
                }
                .comparison-table th,
                .comparison-table td {
                    padding: 12px;
                    text-align: center;
                    border-bottom: 1px solid var(--border-color, #e5e7eb);
                }
                .comparison-table th {
                    background: var(--bg-light, #f9fafb);
                    font-weight: 600;
                    color: var(--text-color, #374151);
                }
                .comparison-table tr:hover {
                    background-color: rgba(24, 144, 255, 0.05);
                }
                .comparison-table tr.match {
                    background-color: rgba(40, 167, 69, 0.1);
                }
                .comparison-table tr.mismatch {
                    background-color: rgba(220, 53, 69, 0.1);
                }
                .badge {
                    padding: 0.25em 0.6em;
                    font-size: 75%;
                    font-weight: 700;
                    border-radius: 0.25rem;
                    display: inline-block;
                    text-align: center;
                    white-space: nowrap;
                    vertical-align: baseline;
                }
                .bg-success {
                    background-color: #28a745 !important;
                    color: white;
                }
                .bg-danger {
                    background-color: #dc3545 !important;
                    color: white;
                }
            </style>
        `;
        document.head.insertAdjacentHTML('beforeend', styleHtml);
    }
}

// 显示数据概览
function showDataOverview(orgId) {
    // 滚动到数据概览部分
    const dataOverviewSection = document.getElementById('total-card');
    if (dataOverviewSection) {
        dataOverviewSection.scrollIntoView({ behavior: 'smooth' });
    }
    
    // 突出显示数据概览区域
    if (dataOverviewSection) {
        dataOverviewSection.classList.add('highlight-card');
        setTimeout(() => {
            dataOverviewSection.classList.remove('highlight-card');
        }, 1500);
    }
}

// 更新数据概览区域
function updateDataOverview(apiData) {
    console.log('更新数据概览区域，API数据:', apiData);
    
    try {
        // 查找数据概览容器
        const overviewContainer = document.getElementById('data-overview');
        if (!overviewContainer) {
            console.warn('找不到数据概览容器');
            return;
        }
        
        // 确保有API数据
        if (!apiData) {
            console.error('无API数据用于更新数据概览');
            return;
        }
        
        // 提取组织名称
        const orgName = apiData.name || apiData.orgName || '未知组织';
        
        // 提取核心指标
        const totalPeople = apiData.totalPeople || apiData.total || 0;
        const departmentCount = apiData.departments?.length || 0;
        const avgAge = apiData.avgAge || apiData.average_age || '未知';
        const genderRatio = apiData.genderRatio || '未知';
        
        // 更新数据概览内容
        overviewContainer.innerHTML = `
            <div class="data-visualization-container">
                <div class="data-visualization-title">
                    <i class="fas fa-chart-pie"></i>${orgName} 数据概览
                </div>
                <div class="row mt-3">
                    <div class="col-md-6 mb-3">
                        <div class="stat-item">
                            <div class="stat-label">总人数</div>
                            <div class="stat-value">${totalPeople}</div>
                        </div>
                    </div>
                    <div class="col-md-6 mb-3">
                        <div class="stat-item">
                            <div class="stat-label">部门数量</div>
                            <div class="stat-value">${departmentCount}</div>
                        </div>
                    </div>
                    <div class="col-md-6 mb-3">
                        <div class="stat-item">
                            <div class="stat-label">平均年龄</div>
                            <div class="stat-value">${avgAge}</div>
                        </div>
                    </div>
                    <div class="col-md-6 mb-3">
                        <div class="stat-item">
                            <div class="stat-label">性别比例 (男:女)</div>
                            <div class="stat-value">${genderRatio}</div>
                        </div>
                    </div>
                </div>
            </div>
        `;
        
        console.log('数据概览区域更新成功');
    } catch (error) {
        console.error('更新数据概览区域时出错:', error);
    }
}
</script>
{% endblock %}